<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="Generator" content="EditPlus?"/>
    <meta name="Author" content=""/>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <title>H5 Get Mobile Photo</title>
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>

    // https://stackoverflow.com/questions/40823512/file-upload-using-flask-and-jquery
    $(document).ready(function() {

        $("form").on('submit', function(event) {
            var name = $('#name').val();
            console.log('in send file func');
            var form = $('#upload-hc')[0];
            var fd = new FormData(form);
// url : 'https://10.0.2.2:5000/uploadhc',
            $.ajax({
                type : 'POST',
                url : 'http:///192.168.7.227:5000//uploadhc//'+name,
                data: fd,
                processData: false,
                contentType: false,
                success:function (res) {
                    console.log("成功");
                    console.log(result.value);

                },
                error:function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("错误");
                  console.log(errorThrown);
                }

            }

            event.preventDefault();

        });

    });

    function previewFile1() {
        var img = document.getElementById("preview1");
        var file =document.getElementById("demo1").files[0];
        var reader = new FileReader();
        reader.addEventListener("load", function () {
            img.src = reader.result;
        }, false);

        if (file) {
            reader.readAsDataURL(file);
        }
    }

    function previewFile2() {
        var img2 = document.getElementById("preview2");
        var file2 = document.getElementById("demo2").files[0];
        var reader2 = new FileReader();
        reader2.addEventListener("load", function () {
            img2.src = reader2.result;
        }, false);

        if (file2) {
            reader2.readAsDataURL(file2);
        }
    }

</script>
<form id="upload-hc">
    <h2>收集签到素材</h2>
    your name:<br>
    <input type="text" name="name" id="name" value="小明1">
    <p>step1:
        <input name="uploadImg1" id="demo1" onchange="previewFile1()" type="file" accept="image/*"/>
    </p>

    <p>step2:
        <input name="uploadImg2" id="demo2" onchange="previewFile2()" type="file" accept="image/*"/>
    </p>
    <p>
        <input type="submit" value="同步训练数据到服务器">
    </p>
    <img width="100" height="130" id="preview1"  th:src="@{/images/index/favicon.png}"/>
    <br/>
    <img width="100" height="130" id="preview2"  th:src="@{/images/index/favicon.png}"/>

</form>
</body>
</html>